<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Branch A forward E F</title>
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="css/ani.css">
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/grid.css">
</head>
<body class="dji-zh-CN dji-pc">
    <nav class="nav">
        <div class="nav-content">
   
                <div class="site_header_category">
                    <ul class="navbar-category">
                        <li class="category-item">
                            <a>
                                <span style="width:45px;height: 26px;       vertical-align: middle;
                                display: inline-block; background-size: cover;background-image: url(./img/logo-white.svg);"></span>
                            </a>
                        </li>
                        <li class="category-item">
                            <a>首页</a></li>
                        <li class="category-item">
                            <a>产品及解决方案 
                            </a>
                            <div class="sub-nav" >
                                <ul>
                                    <li><a>智能农机</a></li>
                                    <li><a>数字农业平台</a></li>
                                    <li><a>智慧农业解决方案</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="category-item"><a>新闻资讯</a></li>
                        <li class="category-item"><a>服务与支持</a></li>
                        <li class="category-item"><a>关于我们</a></li>
                        <li class="category-item"><a>其他行业</a>
                            <div class="sub-nav" >
                                <ul>
                                    <li><a>汽车工业</a></li>
                                    <li><a>工程机械</a></li>
                                 
                                </ul>
                            </div></li>
                        <li class="category-item"><a>经销商加盟</a></li>
                        <li class="category-item"><a>400-960-8889</a></li>
                    </ul>
                </div>
        </div>
    </nav>
    <section class="homepage-banner">
        <div class="swiper-container">
         
        <div class="swiper-wrapper">
            <div class="swiper-slide banner-swiper-slide anim_fade_out" style="width: 100%; opacity: 0; transform: translate(0px, 0px);">
                    <!-- <div style="background-image:url(./img/banner_1.jpg);" class="banner-content"></div> -->
                    <div>
                        <video autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:100%;">
                            <source src="./img/test-video.mp4">
                        </video>
                    </div>
                     
                    <div class="text-box" style="margin-top: 128px;">
                        <div class="headline" style="font-size: 48px;">博创联动</div>
                        <div class="desc" style="font-size: 36px;margin-top: 30px;">以科技塑造农业未来</div>
                        <div  style="width: 880px;height:80px;display: flex;margin: 0 auto;margin-top: 128px;">
                             
                            <div style="width: 220px;height: 80px;text-align: center;">
                             
                                <img src="./img/banner_icon_1.png" width="58px" height="58px"/>
                                <div>质量可靠</div>
                             
                            </div>
                            <div style="width: 220px;height: 80px;text-align: center;">
                                <img src="./img/banner_icon_2.png" width="58px" height="58px"/>
                                <div>降本增效</div>
                            </div>
                            <div style="width: 220px;height: 80px;text-align: center;">
                             
                                <img src="./img/banner_icon_3.png" width="58px" height="58px"/>
                                <div>智能应用</div>
                                 
                            </div>
                            <div style="width: 220px;height: 80px;text-align: center;">
                             
                                <img src="./img/banner_icon_4.png" width="58px" height="58px"/>
                                <div>数字赋能</div>
                            </div>                            
                        </div>
                    </div>
   
            </div>
            <!-- <div class="swiper-slide banner-swiper-slide anim_fade_out" style="width: 100%; opacity: 0; transform: translate(-1263px, 0px);">
                <div style="background-image:url(./img/banner_2.jpg);" class="banner-content"></div>
            </div>
            <div class="swiper-slide banner-swiper-slide anim_fade_out" style="width: 100%; opacity: 0; transform: translate(-2526px, 0px);">
                <div style="background-image:url(./img/banner_3.jpg);" class="banner-content"></div>
            </div>
            <div class="swiper-slide banner-swiper-slide anim_fade_in" style="width: 100%; opacity: 1; transform: translate(-3789px, 0px);">
                <div style="background-image:url(./img/banner_4.jpg);" class="banner-content"></div>
            </div>
            <div class="swiper-slide banner-swiper-slide anim_fade_out" style="width: 100%; opacity: 0; transform: translate(-5052px, 0px);">
                <div style="background-image:url(./img/banner_5.jpg);" class="banner-content"></div>
            </div> -->
         
        </div>
            <!-- <div class="swiper-control-pre" onclick="onClick(-1)">
                <div class="control-btn">
                    <span class="control-arrow">
                        <div class="arrow-icon"></div>
                    </span>
                </div>
            </div>
            <div class="swiper-control-next" onclick="onClick(1)">
                <div class="control-btn">
                    <span class="control-arrow">
                        <div class="arrow-icon"></div>
                    </span>
                </div>
            </div> -->
        </div>
    </section>
    <section class="products">
        <ul class="products-banner-list">
            <li style="background-image: url(./img/grid_1.webp);" class="product-banner-item">
                <!-- <div style="width: 100%;height: 100%;position: absolute;"></div> -->
                <div class="text-box">
                    <div class="headline" style="color: rgba(0,0,0,0.85);">博创Inside 智能农机</div>
                    <div class="desc" style="color: rgba(0,0,0,0.85);">打造下一代操作方式</div>
                    <div class="link_box">
                        <div class="more" style="color: rgba(0,0,0,0.85);">了解更多</div>
                     </div>
                </div>
            </li>
            
            <li style="background-image: url(./img/grid_2.webp);" class="product-banner-item">
                <div style="width: 100%;height: 100%;position: absolute;"></div>
                <div class="text-box">
                    <div class="headline" style="color: rgba(0,0,0,0.85);">农业机械自动驾驶系统</div>
                    <div class="desc" style="color: rgba(0,0,0,0.85);">更轻松，更准确，更高效</div>
                    <div class="link_box">
                        <div class="more" style="color: rgba(0,0,0,0.85);">了解更多</div>
          
                    </div>
                </div>
            </li>
        </ul>
    </section>
        <section class="products">
        <ul class="products-banner-list">
            <li style="background-image: url(./img/grid_3.webp);" class="product-banner-item">
                <div style="width: 100%;height: 100%;position: absolute;"></div>
                <div class="text-box">
                    <div class="headline" style="color: rgba(0,0,0,0.85);">Agfarm 数字农业平台</div>
                    <div class="desc" style="color: rgba(0,0,0,0.85);">从规划到产收，全局数字化管理</div>
                    <div class="link_box">
                        <div class="more" style="color: rgba(0,0,0,0.85);">了解更多</div>
          
                    </div>
                </div>
            </li>
            <li style="background-image: url(./img/grid_4.webp);" class="product-banner-item">
                <div style="width: 100%;height: 100%;position: absolute;"></div>
                <div class="text-box">
                    <div class="headline" style="color: rgba(0,0,0,0.85);">农业机械智能控制与联网系统</div>
                    <div class="desc" style="color: rgba(0,0,0,0.85);">农机的智能化与数字化转型升级</div>
                    <div class="link_box">
                        <div class="more" style="color: rgba(0,0,0,0.85);">了解更多</div>
          
                    </div>
                </div>
            </li>
        </ul>
    </section>
    <div style="height: 20px;"></div>
    <section>
        <div class="swiper-container banner-swiper-conatiner swiper-container-fade swiper-container-horizontal">
        <div class="scroll-swiper">
        <div class="scroll-contain" id="scroll-contain-id" style="transform: translate3d(-7264.5px, 0px, 0px); transition-duration: 0ms;">
            <div class="scroll-item">
                <div class="scroll-item-title">博创联动</div>
                <!-- <img src="./img/scroll_6.jpg" width="1200" height="720"> -->
                <video id="video-0" autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:1200px;height: 720px;">
                    <source src="./img/test-video.mp4">
                </video>
            </div>
            <div class="scroll-item">
                <div class="scroll-item-title">博创联动</div>
                <!-- <img src="./img/scroll_7.jpg" width="1200" height="720"> -->
                <video id="video-1" autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:1200px;height: 720px;">
                    <source src="./img/test-video.mp4">
                </video>
            </div>
            <div class="scroll-item">
                <div class="scroll-item-title">博创联动</div>
                <!-- <img src="./img/scroll_1.jpg" width="1200" height="720"> -->
                <video  id="video-2" autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:1200px;height: 720px;">
                    <source src="./img/test-video.mp4">
                </video>
            </div>
            <div class="scroll-item">
                <div class="scroll-item-title">博创联动</div>
                <!-- <img src="./img/scroll_2.jpg" width="1200" height="720"> -->
                <video id="video-3" autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:1200px;height: 720px;">
                    <source src="./img/test-video.mp4">
                </video>
            </div>
            <div class="scroll-item">
                <div class="scroll-item-title">博创联动</div>
                <!-- <img src="./img/scroll_3.jpg" width="1200" height="720"> -->
                <video id="video-4" autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:1200px;height: 720px;">
                    <source src="./img/test-video.mp4">
                </video>
            </div>
            <div class="scroll-item">
                <div class="scroll-item-title">博创联动</div>
                <!-- <img src="./img/scroll_4.jpg" width="1200" height="720"> -->
                <video id="video-5" autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:1200px;height: 720px;">
                    <source src="./img/test-video.mp4">
                </video>
            </div>
            <div class="scroll-item">
                <div class="scroll-item-title">博创联动</div>
                <!-- <img src="./img/scroll_5.jpg" width="1200" height="720"> -->
                <video id="video-6" autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:1200px;height: 720px;">
                    <source src="./img/test-video.mp4">
                </video>
            </div>
            <div class="scroll-item">
                <div class="scroll-item-title">博创联动</div>
                <!-- <img src="./img/scroll_6.jpg" width="1200" height="720"> -->
                <video  id="video-7" autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:1200px;height: 720px;">
                    <source src="./img/test-video.mp4">
                </video>
            </div>
            <div class="scroll-item">
                <div class="scroll-item-title">博创联动</div>
                <!-- <img src="./img/scroll_7.jpg" width="1200" height="720"> -->
                <video id="video-8" autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:1200px;height: 720px;">
                    <source src="./img/test-video.mp4">
                </video>
            </div>
            <div class="scroll-item">
                <div class="scroll-item-title">博创联动</div>
                <!-- <img src="./img/scroll_1.jpg" width="1200" height="720"> -->
                <video id="video-9" autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:1200px;height: 720px;">
                    <source src="./img/test-video.mp4">
                </video>
            </div>
            <div class="scroll-item">
                <div class="scroll-item-title">博创联动</div>
                <!-- <img src="./img/scroll_2.jpg" width="1200" height="720"> -->
                <video id="video-10" autoplay="auto" loop="" preload="auto" muted=":muted&quot;" style="width:1200px;height: 720px;">
                    <source src="./img/test-video.mp4">
                </video>
            </div>
        </div>
        </div>
        <div class="scroll-control-pre" onclick="changePage(-1)">
            <div class="scroll-btn">
                <span class="control-arrow">
                    <div class="arrow-icon"></div>
                </span>
            </div>
        </div>
        <div class="scroll-control-next" onclick="changePage(1)">
            <div class="scroll-btn">
                <span class="control-arrow">
                    <div class="arrow-icon"></div>
                </span>
            </div>
        </div>
        </div>
    </section>
    <!-- <div style="height: 64px;"></div> -->
    <section>
        <!-- <div class="title">了解不同领域的大疆产品</div> -->
        <div class="list-col">
            <div>
                <a>
                <img class="grid-img" src="./img/bottom_list_1.webp" style="width: 100%;height: 100%;">
                <div class="text-box">
                    <div class="headline">关于创博</div>
                    <div class="desc">全球领先的科技农业服务商</div>
                </div>
                </a>
                <a>
                <img class="grid-img" src="./img/bottom_list_2.webp" style="width: 100%;height: 100%;">
                <div class="text-box">
                    <div class="headline">成为经销商</div>
                    <div class="desc">合作共赢，共创美好农业未来</div>         
                </div>
                </a>
                <a>
                <img class="grid-img" src="./img/bottom_list_3.webp" style="width: 100%;height: 100%;">
                <div class="text-box">
                    <div class="headline">服务与支持</div>
                    <div class="desc">一站式服务保障，全心支持</div>      
                </div>
                </a>
            </div>
        </div>
    </section>
    <section>
            <div class="foot">
                <div style="width: 1200px;height: 210px;display:flex;margin: 0 auto;">
                    <div style="width: 400px;padding: 0 100px;">
                        <p style="color: white; font-size: 16px;margin-top: 40px;">
                            博创联动
                        </p>
                        <p style="color: white;font-size: 12px;line-height: 2">
                            博创联动从农业机械智能控制、数字农业基础设施及农业物联网技术入手，从耕种到收获，
                            为农业从业者提供全维度的智慧农业解决方案，打造面向全球的科技农业生态。
                        </p>
                    </div>
                    <div style="width: 400px;padding: 0 100px;position: relative;">
                        <p style="color: white; font-size: 16px;margin-top: 40px;">
                            联系我们
                        </p>
                        <div style="color: white;font-size: 12px;line-height: 2">
                            北京博创联动科技有限公司          
                        </div>
                        <div style="color: white;font-size: 12px;line-height: 2">
                            400-960-8889         
                        </div>
                        <div style="color: white;font-size: 12px;line-height: 2">
                            marketing@uml-tech.com          
                        </div>
                        <img src="./img/code.png" style="width:86px;height: 86px;position:absolute;left: 300px;top: 60px;">
                    </div>
            </div>
        
            <div style="border-bottom-style: dashed;border-bottom-width: 1px;width: 100%;height: 1px;color: white;"></div>
            <div style="text-align: center;color: white;font-size: 12px;height: 85px;">
              
                <div style="padding-top: 24px;padding-bottom: 6px;">
                    备案号： 京ICP备15010821号
                </div>
                <div>Copyright © 版权所有 北京博创联动科技有限公司</div>
                </div>
            </div>
        </div>
    </section>
    <script>
        let idx = 0
        const maxpage = 4
        function onClick(op)
        {
           idx = op +idx
          if(idx <0)
          {
            idx = maxpage
          }
          if(idx > maxpage)
          {
              idx = 0
          }
          
          let items = document.getElementsByClassName("swiper-slide")
     
          for(let i=0;i<items.length;++i)
          {
            let element = items[i]
            element.className ='swiper-slide banner-swiper-slide anim_fade_out' 
            element.style.opacity = 0
            let w = element.offsetWidth*i 
            console.log(element.offsetWidth,element.clientWidth,element.scrollWidth)
            element.style.transform = `translate(-${w}px,0px)`
            element.style.transformDuration = `800ms`
            if(idx == i)
            {
                element.className = 'swiper-slide banner-swiper-slide anim_fade_in' 
                element.style.opacity = 1
            }
          }
        }
        onClick(0)
        let page = 2
        const maxPage = 3
        let scrolling = false
        function changePage(op)
        {
            if(scrolling)
            {
                return true
            }
            else{
                scrolling = true
            }
            page = op +page

            const nextPage = page
            if(page < 2)
            {
                page = maxPage
            }
            if(page > maxPage)
            {
                page = 2
            }
            let element = document.getElementById("scroll-contain-id")
            let w =  (element.clientWidth-1200)/2 -1216*nextPage
            element.style.transform = `translate3d(${w}px,0px,0px)`
            element.style.transitionDuration= '600ms'
            
            setTimeout(function(){
                scrolling = false
                let w =  (element.clientWidth-1200)/2 -1216*page
                element.style.transform = `translate3d(${w}px,0px,0px)`
                element.style.transitionDuration= '0ms'

                for(let i=0;i<=10;i++)
                {
                    const id = `video-${i}`
                   let node =  document.getElementById(id)
               
                   if(i == page)
                   {
                       node.play()
                   }
                   else{
                       node.pause()
                   }
                }
            },600)
        }
        changePage(0)
        window.onresize = function()
        {
        
            let element = document.getElementsByClassName("swiper-slide").item(idx)
            let w = element.clientWidth*idx
            element.style.transform = `translate(-${w}px,0px)` 
        }
    </script>

</body>
</html>